<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <div th:replace="./common/include_header :: copyright"></div>
</head>
<body>
<!-- Content Wrapper. 其他页面替换的地方-->
<!-- 新增菜单弹出框   begin -->
<div class="modal fade" id="addFuncModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="dataTitle">新增功能块</h4>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form method="post" id="saveFuncForm">
                <div class="col-md-12">
                    <div class="card card-warning">
                        <!-- /.card-header -->
                        <div class="card-body">
                            <input type="hidden" name="funcUid" id="funcUid">
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <input type="text" class="form-control" placeholder="功能名[ps：不能重复]"
                                               name="funcName" id="funcName" required>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-sm-12">
                                    <!-- text input -->
                                    <div class="form-group">
                                        <textarea class="form-control" cols="50" rows="4" placeholder="功能内容[具体sql]" name="funcContent"
                                                  id="funcContent" required></textarea>
                                    </div>
                                </div>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                </div>
                <div class="modal-footer justify-content-between">
                    <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                    <button type="button" class="btn btn-primary" th:onclick="saveFunc()">保存</button>
                </div>
            </form>
        </div>
        <!-- /.modal-content -->
    </div>
    <!-- /.modal-dialog -->
</div>
<!-- 新增菜单弹出框   end -->
<!-- Main content -->
<section class="content">
    <!-- Content Wrapper. Contains page content -->
    <div class="content-wrapper" style="margin-left: 0px;">
        <!-- Content Header (Page header) -->
        <section class="content-header">
            <div class="container-fluid">
                <div class="row mb-2">
                    <div class="col-sm-6">
                        <h1>数据查询列表</h1>
                    </div>
                </div>
            </div><!-- /.container-fluid -->
        </section>
        <!-- Main content -->
        <section class="content">
            <div class="container-fluid">
                <div class="row">
                    <div class="col-md-3">
                        <div class="card card-warning">
                            <div class="card-header">
                                <h3 class="card-title">查询条件</h3>
                            </div>
                            <!-- /.card-header -->
                            <div class="card-body">
                                <form>
                                    <div class="row">
                                        <div class="col-sm-12">
                                            <!-- text input -->
                                            <div class="form-group">
                                                <label>功能块名称</label>
                                                <input type="text" class="form-control" placeholder="功能块名称"
                                                       id="queryFuncName" name="funcName" th:value="${funcName}">
                                            </div>
                                        </div>
                                    </div>
                                    <div>
                                        <button type="submit" id="queryFunc" class="btn btn-primary">查询</button>
                                        <button type="button" id="addFunc" class="btn btn-primary">新增
                                        </button>
                                    </div>
                                </form>
                            </div>
                            <!-- /.card-body -->
                        </div>
                    </div>
                    <div class="col-md-9">
                        <div class="card">
                            <div class="card-header">
                                <h3 class="card-title">结果列表</h3>
                            </div>
                            <div>
                                <div class="card-body">
                                    <table id="dataTable" class="table dataTables_wrapper">
                                        <thead>
                                        <tr>
                                            <th width="10%">序号</th>
                                            <th width="20%">模块名</th>
                                            <th width="55%">模块内容</th>
                                            <th width="15%">操作</th>
                                        </tr>
                                        </thead>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- /. ROW  -->

                </div>
                <!-- /.row -->
            </div><!-- /.container-fluid -->
        </section>
        <!-- /.content -->
    </div>
</section>
<!-- /.content -->
<script>
    $(function () {
        var selected = [];
        var table = $('#dataTable').dataTable({
            aoColumns: [
                {
                    "sTitle": "序号",
                    "sClass": "dt-center",
                    "bSortable": false,
                    "data": null,
                    "targets": 0
                },
                {"data": "funcName"},
                {"data": "funcContent"},
                {
                    "data": "funcUid",
                    "class": "text-center",
                    "render": function (data, type, row) {
                        return '<span class="btn btn-primary btn-xs" data-id="' + data + '" onclick="editFunc(\'' + row.funcUid + '\',\''  + row.funcName + '\',\'' + escape(row.funcContent) + '\')">编辑</span> <span class="btn btn-danger btn-xs" data-id="' + data + '" onclick="delFunc(\'' + data + '\')">删除</span>';
                    }
                }
            ],
            "fnDrawCallback": function () {//增加序号
                this.api().column(0).nodes().each(function (cell, i) {
                    cell.innerHTML = i + 1;
                });
            },
            sAjaxDataProp: 'data',//指定当从服务端获取表格数据时，数据项使用的名字
            "ajax": {
                "url": "/func/list",
                "data": function (d) {
                    //添加额外的参数传给服务器
                    d.funcName = $('#queryFuncName').val();
                },
                success: function (sort) {//加一个success即可实现list无权限提醒
                    if (sort.code == 500) {
                        alert(sort.msg);
                    } else {
                        $('#dataTable').dataTable().fnClearTable();    //清空表格
                        if (sort.data.length > 0)
                            $('#dataTable').dataTable().fnAddData(sort.data, true);  //刷下表格
                    }
                }
            },
            //"sAjaxSource" : "/sys/generator/list",
            searching: false, //去掉搜索框方法一：百度上的方法，但是我用这没管用
            sDom: '"top"i',   //去掉搜索框方法二：这种方法可以，动态获取数据时会引起错误
            bFilter: false,    //去掉搜索框方法三：这种方法可以
            bAutoWidth: false, //是否启用自动适应列宽
            bDestroy: true,
            bLengthChange: false,   //去掉每页显示多少条数据方法
            pagination: true, //分页
            "processing": true,//显示“处理中...”
            "serverSide": false,
            bSort: false,
            //"fnServerParams" : function(aoData) {
            //    aoData.push({
            //        "name" : "tableName",
            //        "value" : $('#tableName').val()
            //    });
            //},
            "oLanguage": {
                "sLengthMenu": "每页显示 _MENU_ 条",
                "sZeroRecords": "没有找到符合条件的数据",
                "sInfo": "当前第 _START_ - _END_ 条　共计 _TOTAL_ 条",
                "sInfoEmpty": "没有记录",
                "sInfoFiltered": "(从 _MAX_ 条记录中过滤)",
                "sSearch": "搜索",
                "sProcessing": "数据加载中...",
                "oPaginate": {
                    "sFirst": "首页",
                    "sPrevious": "上一页",
                    "sNext": "下一页",
                    "sLast": "尾页"
                }
            },
            "rowCallback": function (row, data) {
                if ($.inArray(data.DT_RowId, selected) !== -1) {
                    $(row).toggleClass('selected');
                }
            },
            "initComplete": function (settings, json) {
                alert('DataTables has finished its initialisation.');
            }
        });
        $('#dataTable tbody').on('click', 'tr', function () {
            var id = this.id;
            var index = $.inArray(id, selected);

            if (index === -1) {
                selected.push(id);
            } else {
                selected.splice(index, 1);
            }

            $(this).toggleClass('info');
        });

        $('#addFunc').click(function () {
            $('#dataTitle').html("新增功能块");
            $('#funcUid').val('');
            $("#addFuncModal").modal("toggle");  //手动关闭
        });
    });

    //删除数据源，目前只能删除子节点菜单
    function delFunc(funcUid) {
        swal({
            title: '确定删除吗？',
            text: '删了，你将无法恢复它！',
            type: 'warning',
            showCancelButton: true,
            confirmButtonColor: '#3085d6',
            cancelButtonColor: '#d33',
            confirmButtonText: '执意删除！',
        }).then(function () {
            $.ajax({
                type: "POST",
                url: "/func/del",
                data: "funcUid=" + funcUid,
                success: function (data) {
                    $("#dataTable").DataTable().ajax.reload();
                    swal(
                        '删除！',
                        '哦豁，你的功能块已经被删除。',
                        'success'
                    );
                },
                error: function () {
                    swal(
                        'error',
                        '删除功能块失败。',
                        'error'
                    );
                }
            })
        })
    }

    function saveFunc() {
        if ($("#saveFuncForm").valid()) {
            $.ajax({
                type: "POST",
                url: "/func/saveOrUpdate",
                data: $('#saveFuncForm').serialize(),
                success: function (data) {
                    //$('#'+menuId).remove();
                    if (data == '000') {
                        $("#addFuncModal").modal("toggle");  //手动关闭
                        $("#dataTable").DataTable().ajax.reload();
                        swal(
                            'success！',
                            '保存成功。',
                            'success'
                        );
                    } else {
                        swal(
                            'error',
                            data,
                            'error'
                        );
                    }
                },
                error: function () {
                    swal(
                        'error',
                        '保存失败。',
                        'error'
                    );
                }
            })
        }
    }

    function editFunc(funcUid, funcName, funcContent) {
        $('#dataTitle').html("编辑功能块");
        $('#funcUid').val(funcUid);
        $('#funcName').val(funcName);
        $('#funcContent').html(unescape(funcContent));
        $("#addFuncModal").modal("toggle");  //手动关闭
    }
</script>
</body>
</html>

